<template>
  <div class="search">
    <div class="top">
      <Search idi="0" placeholder="搜索" ssDi="20px" ssColor="hui" />
      <span>取消</span>
    </div>
    <p class="p">搜索历史</p>
    <div class="searchdiv2">
      <div v-for="item, index in searchListVal" :key="index" class="searchdiv2-box" @click="search(item)">{{ item }}</div>
    </div>
  </div>
</template>

<script>
import Search from '@/components/common/Search.vue';
export default {
  components: { Search }
}
</script>

<style lang="scss" scoped>
.search {
  width: 96%;
  margin-left: 2%;

  .top {
    padding-top: 7px;
    display: flex;

    span {
      width: 40px;
      font-size: 14px;
      line-height: 30px;
      padding-left: 10px;
    }
  }

  .p {
    font-size: 17px;
    padding: 70px 10px;
  }
  .searchdiv2 {
    width: 90%;
    font-size: 10px;
    height: 10px;
    color: #000 !important;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    padding: 10px;
  }

  .searchdiv2 {
    height: 0px;
    flex-wrap: wrap;
    justify-content: flex-start;

    .searchdiv2-box {
      background-color: rgba(0, 0, 0, 0.04);
      border-radius: 4px;
      flex: 1;
      width: calc((100% - 10px) / 3); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 10px) / 3); // 加入min-width、max-width后每个child的宽度就生效了
      max-width: calc((100% - 10px) / 3);
      text-align: center;
      margin-left: 3px;
      margin-top: 3px;
    }
  }
}

}
</style>